<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./request/requset.js"></script>
  <style>
    * {
    margin: 0;
    padding: 0;
  }
  
  .head {
    width: 800px;
    height: 50px;
    border: 1px solid gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
  background-color: rgb(239, 239, 239);
  }
  
  .bigbox button {
    background-color: #1890ff;
    border: 0;
    width: 50px;
    height: 30px;
    color: white;
    border-radius: 5px;
  }
  
  tbody td button {
    margin-left: 10px;
  }
  
  table {
    width: 800px;
    text-align: center;
  }
  
  .nan,
  .dis {
    box-sizing: border-box;
    font-size: 12px;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
    padding: 3px;
    background-color: rgba(255, 0, 0, 0.1);
  }
  
  .nv,
  .avail {
    box-sizing: border-box;
    font-size: 12px;
    color: green;
    border: 1px solid green;
    border-radius: 5px;
    padding: 3px;
    background-color: rgba(0, 128, 0, 0.1);
  }
  
  
  
  /* 修改页面 */
  .pop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .pop>div {
    width: 500px;
    height: 300px;
    background-color: white;
    display: flex;
    flex-direction: column;
  }
  
  .pop>div .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 30px;
    border-bottom: 1px solid rgb(255, 255, 255);
  }
  
  .pop>div .header button {
    background-color: white;
    border: 0;
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
  
  .pop .input {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .pop .input>input{
    height: 25px;
  }
  .pop .button{
    display: flex;
    justify-content: right;
    padding: 10px;
  }
  .pop .button .false ,.pop .button .true{
    width: 50px;
    height: 30px;
    margin-left: 10px;
  }
  .pop .button .true{
    color: white;
    background-color: #409eff;
    border:0;
  }
  
  .change{
    display: none;
  }
  .add{
    display: none;
  }
  </style>
</head>
<body>
  <center>
    <div class="bigbox">
    <div class="head">
      <h3>用户列表</h3>
      <button class="addBtn">添加</button>
    </div>
    <table>
      <thead>
        <tr>
          <td>序号</td>
          <td>用户名</td>
          <td>手机号</td>
          <td>邮箱</td>
          <td>性别</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>前端课程</td>
          <td>17633526523</td>
          <td>838023430@qq.com</td>
          <td>
            <p class="nan">男</p>
          </td>
          <td>
            <p class="dis">禁用</p>
          </td>
          <td><button>编辑</button><button>删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>


  <!-- 修改 -->
  <div class="pop change">
    <div>
      <div class="header">
        <span>修改用户</span>
        <button class="false">×</button>
      </div>
      <div class="input">
        <input type="text" name="name" placeholder="用户名"><br>
        <input type="text" name="pwd" placeholder="密码"><br>
        <input type="text" name="email" placeholder="邮箱"><br>
        <div>
          <input type="radio" value="男" name="sex">男
          <input type="radio" value="女" name="sex">女
          <input type="radio" value="保密" name="sex">保密
        </div>
        <input type="text" name="iphone" placeholder="手机号">
      </div>
      <div class="button">
        <button class="false">取消</button>
        <button class="true">确定</button>
      </div>
    </div>

  </div>


  <div class="pop add">
    <div>
      <div class="header">
        <span>添加用户</span>
        <button class="false">×</button>
      </div>
      <div class="input">
        <input type="text" name="name" placeholder="用户名"><br>
        <input type="password" name="pwd" placeholder="密码"><br>
        <input type="text" name="email" placeholder="邮箱"><br>
        <div>
          <input type="radio" value="男" name="sex" checked>男
          <input type="radio" value="女" name="sex">女
          <input type="radio" value="保密" name="sex">保密
        </div>
        <input type="text" name="iphone" placeholder="手机号">
      </div>
      <div class="button">
        <button class="false">取消</button>
        <button class="true">确定</button>
      </div>
    </div>

  </div>
  </center>
  
</body>
<script>
const oTbody = document.querySelector('tbody')
const oDiv = document.querySelector('.bigbox')
const oAdd = document.querySelector('.add')
const oChange = document.querySelector('.change')
let index
let arr

setPage()
async function setPage() {
  const res = JSON.parse(await myPromiseAjax({
    type: 'get',
    url: '/api/getTable'
  }))
  arr = res
  let str = ``
  res.forEach((item, index) => {
    str += `
    <tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.iphone}</td>
      <td>${item.email}</td>
      <td>
        <p class="${item.sex === '男' ? 'nan' : 'nv'}">${item.sex}</p>
      </td>
      <td>
        <p class="${item.state === 'true' ? 'avail' : 'dis'}">${item.state === 'true' ? '可用' : '禁用'}</p>
      </td>
      <td>
        <button index="${index}" class="changeBtn">编辑</button>
        <button index="${index}" class="delBtn">删除</button>
      </td>
    </tr>
    `
  })
  oTbody.innerHTML = str
}

oDiv.addEventListener('click', e => {
  if (e.target.className === 'addBtn') {
    oAdd.style.display = 'flex'
  }
  else if (e.target.className === 'changeBtn') {
    oChange.style.display = 'flex'
    index = Number(e.target.getAttribute('index'))
    oChange.querySelector('[name = name]').value = arr[index].name
    oChange.querySelector('[name = email]').value = arr[index].email
    oChange.querySelector('[name = iphone]').value = arr[index].iphone
    oChange.querySelectorAll('[name = sex').forEach(item => {
      if(item.value === arr[index].sex){
        item.checked = true
       
      }
    })
  }
  else if (e.target.className === 'delBtn') {

    if (window.confirm('您确定删除该信息吗?')) {
      arr.splice(Number(e.target.getAttribute('index')), 1)
      sendRequest('post', '/api/setTable', arr)
      setPage()

    }
  }
})


// 给增加div添加点击事件委托
oAdd.addEventListener('click', e => {
  // 点击×或者取消按钮
  if (e.target.className === 'false') {
    oAdd.style.display = 'none'
    // 点击确认按钮
  } else if (e.target.className === 'true') {
    // 获取需要添加的信息
    let name = oAdd.querySelector('[name = name]').value
    let pwd = oAdd.querySelector('[name = pwd]').value
    let email = oAdd.querySelector('[name = email]').value
    let sex
    oAdd.querySelectorAll('[name = sex').forEach(item => {
      if(item.checked){
        sex = item.value
      }
    })
    let iphone = oAdd.querySelector('[name = iphone]').value

    let obj = {
      id: arr.length === 0 ? 1 : arr[arr.length - 1].id + 1,
      name: name,
      pwd: pwd,
      iphone: iphone,
      email: email,
      sex: sex,
      state: "false"
    }
    // 调用发送请求
    arr.push(obj)
    sendRequest('post', '/api/setTable', arr)
    setPage()
    oAdd.style.display = 'none'
  }
})

// 给编辑div添加点击事件委托
oChange.addEventListener('click', e => {
  if (e.target.className === 'false') {
    oChange.style.display = 'none'
  }else if(e.target.className === 'true'){
     // 获取需要添加的信息
     let name = oChange.querySelector('[name = name]').value
     let pwd = oChange.querySelector('[name = pwd]').value
     let email = oChange.querySelector('[name = email]').value
     let sex
     oChange.querySelectorAll('[name = sex').forEach(item => {
       if(item.checked){
         sex = item.value
       }
     })
     let iphone = oChange.querySelector('[name = iphone]').value
 
     arr[index] = {
       id: arr[index].id,
       name: name,
       pwd: pwd,
       iphone: iphone,
       email: email,
       sex: sex,
       state: arr[index].state
     }
     // 调用发送请求
     sendRequest('post', '/api/setTable', arr)
     setPage()
     oChange.style.display = 'none'
  }
})


// 发送请求函数
async function sendRequest(type, url, data) {
  if (type === 'get') {
    return JSON.parse(await myPromiseAjax({
      type: type,
      url: url
    }))
  } else if (type === 'post') {
    return JSON.parse(await myPromiseAjax({
      type: type,
      url: url,
      data: JSON.stringify(data)
    }))
  }

}
</script>
</html>